<template>
	<view class="page">
		<view class="list">
			<view v-for="(item,index) in 10" class="item">
				<view class="body u-flex u-row-between u-border-bottom">
					<view class="img">
						<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
					</view>
					<view class="href u-flex u-flex-1 u-row-between">
						<view class="href-left">
							<text class="title">
								郭沫若旧居
							</text>
							<view class="infor u-flex u-flex-1 u-row-between u-row-center">
								<text class="">设备量：116</text>
								<text class="infor-2">设备量：116</text>
							</view>
						</view>
						<view class="href-right">
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="footer u-flex u-row-center u-row-between">
					<view class="footer-view u-flex u-row-center"><u-icon style="margin-right:10rpx" name="arrow-right" color="#d2dff0" size="28"></u-icon><text>报警书：0</text></view>
					<view class="footer-view u-flex u-row-center"><u-icon style="margin-right:10rpx" name="arrow-right" color="#ccdffb" size="28"></u-icon><text>报警书：0</text></view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			title: '素胚勾勒出青花，笔锋浓转淡',
			subTitle: '2020-05-15',
			thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
		};
	}
};
</script>

<style scoped lang="scss">
	.page {
		background: rgb(244,244,244);
		min-height: 100vh;
	}
	.list {
		padding: 12rpx 0;
	}
	
	.item {
		background-color: #fff;
		font-size: 32rpx;
		color: #3e3e3e;
		padding: 30rpx 30rpx 20rpx;
		padding-bottom: 0;
		margin-bottom: 12rpx;
		.body {
			
			padding-bottom: 30rpx;
		}
		.img {
			flex: 0 0 160rpx;
			height: 140rpx;
			border: 1rpx solid #ebebeb;
			margin-right: 20rpx;
			border-radius: 8rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.href {
				.title {
					font-weight: bold;
					font-size: 29rpx;
				}
				.infor {
					flex: 1;
					margin-top: 30rpx;
					font-size: 26rpx;
					color: #acacac;
					.infor-2 {
						margin-left: 20rpx;
					}
				}
				
		}
		.footer {
			font-size: 28rpx;
			
			.footer-view {
				height: 40rpx;
				flex: 1;
				text-align: center;
				margin: 20rpx 0;
				color: #060606;
			}
			.footer-view:nth-of-type(1) {
				border-right: 1rpx solid #ebebeb;
			}
		}
		
	}
		
	
</style>